<template>
    <div class="brand">
      <mt-header fixed class="head" title="旗袍品牌">
        <router-link to="/home" slot="left">
          <mt-button icon="" class="iconfont">&#xe615;</mt-button>
        </router-link>
        <router-link to="/groupcar" slot="right" icon="">
          <mt-button class="iconfont buy">&#xe600;</mt-button>
        </router-link>
      </mt-header>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide><img src="../../assets/img/banner8.jpg" /></swiper-slide>
        <swiper-slide><img src="../../assets/img/banner6.jpg" /></swiper-slide>
        <swiper-slide><img src="../../assets/img/banner3.jpg" /></swiper-slide>
        <!-- 分页器 -->
        <div class="swiper-scrollbar"  slot="pagination"></div>
      </swiper>
      <div class="brand-box-floor">
        <div class="brand-logo">
          <a href="##">
            <img src="../../assets/img/logo1.png" />
          </a>
        </div>
        <div class="brand-intro">
          <div class="brand-intro-tit">
            <h2>观唐古典旗袍旗舰店</h2>
            <p>描述：<span>4.8</span></p>
            <p>服务：<span>4.8</span></p>
            <p>物流：<span>4.8</span></p>
          </div>
          <div class="brand-intro-show">
            <a href="##"><img src="../../assets/img/brand1.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand2.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand3.png" alt=""></a>
          </div>
        </div>
        <div class="more">
          <a href="#">
            <img src="../../assets/img/more.png" /></a>
        </div>
      </div>
      <div class="brand-box-floor">
        <div class="brand-logo">
          <a href="##">
            <img src="../../assets/img/logo2.png" />
          </a>
        </div>
        <div class="brand-intro">
          <div class="brand-intro-tit">
            <h2>观唐古典旗袍旗舰店</h2>
            <p>描述：<span>4.8</span></p>
            <p>服务：<span>4.8</span></p>
            <p>物流：<span>4.8</span></p>
          </div>
          <div class="brand-intro-show">
            <a href="##"><img src="../../assets/img/brand3.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand4.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand5.png" alt=""></a>
          </div>
        </div>
        <div class="more">
          <a href="#">
            <img src="../../assets/img/more.png" /></a>
        </div>
      </div>
      <div class="brand-box-floor">
        <div class="brand-logo">
          <a href="##">
            <img src="../../assets/img/logo3.png" />
          </a>
        </div>
        <div class="brand-intro">
          <div class="brand-intro-tit">
            <h2>观唐古典旗袍旗舰店</h2>
            <p>描述：<span>4.8</span></p>
            <p>服务：<span>4.8</span></p>
            <p>物流：<span>4.8</span></p>
          </div>
          <div class="brand-intro-show">
            <a href="##"><img src="../../assets/img/brand7.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand8.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand9.png" alt=""></a>
          </div>
        </div>
        <div class="more">
          <a href="#">
            <img src="../../assets/img/more.png" /></a>
        </div>
      </div>
      <div class="brand-box-floor">
        <div class="brand-logo">
          <a href="##">
            <img src="../../assets/img/logo4.png" />
          </a>
        </div>
        <div class="brand-intro">
          <div class="brand-intro-tit">
            <h2>观唐古典旗袍旗舰店</h2>
            <p>描述：<span>4.8</span></p>
            <p>服务：<span>4.8</span></p>
            <p>物流：<span>4.8</span></p>
          </div>
          <div class="brand-intro-show">
            <a href="##"><img src="../../assets/img/brand10.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand11.png" alt=""></a>
            <a href="##"><img src="../../assets/img/brand12.png" alt=""></a>
          </div>
        </div>
        <div class="more">
          <a href="#">
            <img src="../../assets/img/more.png" /></a>
        </div>
      </div>
      <img class="last" src="../../assets/img/banner7.jpg" /></div>
</template>

<script>
    export default {
      data(){
        return{
          swiperOption: {
            loop:true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: true,
              disableOnInteraction: false,
            }, //自动播放
            pagination: {
              el: '.swiper-scrollbar', //滚动条
            }
          }
        }
      },
        name: "Brand"
    }
</script>

<style scoped lang="stylus">
  .brand
    .last
      width: 100%
      margin-bottom: 2.5rem
    .brand-box-floor
      padding: 10px;
      background-color: #e8d6c3;
      height: 120px;
      letter-spacing: 0px;
      font-size: 0px;
      margin-bottom: 10px;
      .more
        display: inline-block;
        position: relative;
        vertical-align: top;
        width: 12px;
        height: 120px;
        float: right;
        a
          display: block;
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-6px,-19px);
          img
            display: block;
            width: 100%;
      .brand-intro
        display: inline-block;
        vertical-align: top;
        width: 65%;
        padding: 0 10px;
        .brand-intro-show
          width: 100%
          a
            display: inline-block;
            width: 60px;
            padding-right: 5px;
            img
              margin-top: .1rem
              width: 60px;
              display: block;
        p
          display: inline-block;
          margin-top: .2rem
          color: #60251f;
          font-size: 10px;
          padding-right: 10px;
          transform: scale(0.8);
          -webkit-transform-origin: left;
          span
            color: #fd4e4a;
            font-size: 10px;
        h2
          font-size: 15px;
          color: #60251f;
      .brand-logo
        display: inline-block;
        position: relative;
        width: 72px;
        height: 120px;
        vertical-align: top;
        a
          display: block;
          width: 72px;
          height: 72px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-36px,-36px);
          img
            display: block;
            width: 72px;
            height: 72px;
    .swiper
      margin-top: 2rem
      img
        vertical-align top
        width: 100%
        height: 100%
        margin-bottom: .8rem
    .head
      z-index 2
      display flex
      background: #581513
</style>
